import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestFlexWidget extends StatefulWidget {
  const TestFlexWidget({super.key});

  @override
  State<TestFlexWidget> createState() {
    return _FlexState();
  }
}

class _FlexState extends State<TestFlexWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Flex 学习使用"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text("弹性布局水平布局，基于权重，类似Android LinearLayout的layout_weight"),
            Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Text("1"),
                    )),
                Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.blue,
                      child: Text("2"),
                    )),
              ],
            ),
            const Text("弹性布局垂直布局，Spacer "),
            SizedBox(
              height: 400,
              width: 100,
              child: Flex(
                direction: Axis.vertical,
                children: [
                  Expanded(
                      flex: 1,
                      child: Container(
                        width: 100,
                        color: Colors.red,
                        child: Text("1"),
                      )),
                  Spacer(
                    flex: 1,
                  ),
                  Expanded(
                      flex: 2,
                      child: Container(
                        width: 100,
                        color: Colors.blue,
                        child: Text("2"),
                      )),
                ],
              ),
            ),
            const Text("Row Column 都是基于Flex进行开发的，所以能够使用Flex的位置基本全部能够使用 Row/Column"),
          ],
        ),
      ),
    );
  }
}
